Web标准网站建设的一些思考
发布时间:2013-11-23 浏览:181打印字号:大中小
1、对于web标准和W3C XHTML规范的理解
按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论“^_^)。但我们认为,事实上从技术的角度上讲, 这两个事物几乎没有任何相关性。web标准简而言之就是将页面的结构、表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言”div+css"。 但W3C XHTML的任何一个版本都没有对web标准理念作限制。很显然的,我们可以用xhtml 1.1写出一个table定位的网页。说到这里,或许会认为我们讲了一堆废话。但任何一项技术,只有当你对基础概念有足够清晰的认识的时候,你才会正确的使 用它。我们从下面两个方面,来谈谈如今Web标准应用走向的两个歧途:
第一种情况很简单。自以为只要使用了XHTML+CSS就是Web标准了。页面里面遍地是class和id。肆意的为每个细节都单独定义 class。这样的页面和传统的html的区别就是img标签里多了个"/"。事实上这样子还不如回到传统的html,至少我们可以轻松的使用font,而 不用总是跟查字典一样去查样式表。另一种更隐蔽的随意使用CSS的我们在以后讲。
第二种情况我们觉得比较难理解一些,即试图用各种纷繁复杂的div嵌套和css语句来实现你所想要的表现。很简单的一个例子就在我们刚看到的一个帖
子"
不用切图的页面圆角"。首先我们想肯定的是这个创意确实很不错,使用CSS功能将圆角“画”出来。为此,设计者必须在相应的位置加上一大段如下的代码:
但是,这里严重违反了Web标准的基本概念——结构与表现要分离。因为它将用于控制网页表现的代码放在结构文档中了。或许你会说它事实上还是将 真正的表现代码放在CSS里的。但我们认为这是一个偷换概念。因为以上这些b标签跟网页结构无关,它们都是一些空标签。也就是说,它的存在并不是为了将某些 内容放在文档结构需要的位置。因此它们对于文档结构来说只是一些废代码。
另外一个例子可能更加隐蔽。之前我们有在alistapart.com上看到过如何实现网页三通栏的文章,其原理大概就是使用三四个div相互嵌 套。我们认为这也是一个违反Web标准思想的做法。因为这些div标签在代码中摆放的次序已经不单纯是为了结构的需要,而是用于网页的表现。
当然,我们承认,以上的观点在一定程度是钻牛角尖(但反过来说,非要实现非图片圆角不也是在钻牛角尖么,呵呵)。有些时候结构和表现并不是那么轻 易的就能分开的,我们为了实现一些丰富的表现不得不让结构去迁就(想想
最后,我们想声明的是,我们并不是"非图片圆角"是无意义或是错误的。我们也很佩服作者的聪明和灵感。我们觉得这样的技术研究就如同以前用CSS画国旗 一样,对CSS技术的熟练掌握很有帮助。但是,它的用途也应该仅和CSS国旗一样局限,不应该在实际应用中采纳。因为它违反Web标准的基本原则。
2、HTML标签的语义
如今Web标准都被通俗的叫做“div+css”或者“层布局”。我们不反对这种便宜行事的叫法。但是这样会陷入一个误区:即大量的使用div标签作为结构元素。事实上这是一种更高级的div滥用(Jeffrey Zeldman在《网站重构》一书中提到)。
HTML为我们提供了相当丰富的标签,每个标签都有它各自的含义。我们认为在设计时,除了遵循HTML语法以外,应该充分利用并遵守各标签的“语 义”。如标题文字应该包含在h1-h6中,大段的文字内容应该由
进行分段而不是
,列表项应该放在ul或ol或dl中,表格形式的数据应该仍然用table布局。
为什么要这样做?一个很有说服力的原因是,保证在用户去掉CSS显示的情况下,网页能够尽量有效的将内容的结构层次显示出来。如果全部用div,当去掉CSS之后,整个网页就失去了层次,只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。
我们下面详细的列举一下我们对一些标签的语义的理解:
p br
先说个最简单的。分段要用p标签而不是用br(甚至连续两个
)。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子是论坛发帖,如果我们想分段,便打回车。而如此传输到后台并显示出来
的,显然就是用
分段的。
table th
由于大力宣扬div+css的结果,似乎现在谁用table布局谁就是未开化的土著。但我们认为这种观点是不正确的。table的含义是表格,因 此凡是应该以表格形式出现的数据,仍然应该用table布局。简单的例子是班级同学的花名册,包括姓名学号性别等等,这明显是一个表格形式的数据,因此应 该用table布局。另一个比较值得探讨的例子是,blog里面的日历导航。我们曾经有见过一个blog程序,它的日历导航里的各个日期,从1号到30号全 用div套好,再使用float:left样式7个一排的排出当月的日历。当我们取消浏览器的CSS显示之后,日历的那部分则从1号到30号一竖排下来。我们 认为这是不对的。因为日历应该是一个表格形式的数据,因此仍然应该用table布局。当取消css之后,应该仍然按照一排7个的样子归成一个表格。
th则是另一个会被忽视的标签。由于CSS的万能,所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲,一些表格单元应该用 th标签。比如上文说到的日历表格,里面的“MON TUE /WED... SUN”这些标识星期的单元,就应该用th而不是td。